<script>
// 导出默认组件，组件名称为 "AsideMenu"
export default {
  name: "AsideMenu",
  methods: {
    // 打开菜单项时的回调函数，接受菜单项的 key 和 keyPath 参数
    handleOpen(key, keyPath) {
      console.log(key, keyPath); // 打印打开的菜单项的 key 和路径
    },
    // 关闭菜单项时的回调函数，接受菜单项的 key 和 keyPath 参数
    handleClose(key, keyPath) {
      console.log(key, keyPath); // 打印关闭的菜单项的 key 和路径
    }
  },
}
</script>

<template>
  <!-- 主容器，ID为 AsideMenu -->
  <div id="AsideMenu">
    <!-- 使用 el-row 和 el-col 创建一个栅格布局 -->
    <el-row class="tac">
      <el-col :span="12">
        <!-- 垂直菜单组件 -->
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
          <!-- 默认选中的菜单项索引为2 -->
          <!-- 自定义样式类为 el-menu-vertical-demo -->
          <!-- 菜单展开时调用 handleOpen 方法 -->
          <!-- 菜单关闭时调用 handleClose 方法 -->
          <!-- 菜单背景颜色为 #545c64 -->
          <!-- 菜单文字颜色为 #fff -->
          <!-- 选中项文字颜色为 #ffd04b -->

          <!-- 菜单项：借阅信息 -->
          <el-menu-item index="2" disabled>
            <!-- 索引为2，禁用状态 -->
            <i class="el-icon-document"></i>
            <span slot="title">借阅信息</span>
          </el-menu-item>

          <!-- 菜单项：图书信息 -->
          <el-menu-item index="1" disabled>
            <!-- 索引为1，禁用状态 -->
            <i class="el-icon-document"></i>
            <span slot="title">图书信息</span>
          </el-menu-item>
        </el-menu>

      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
/* AsideMenu 主容器样式 */
#AsideMenu {
  width: 200px; /* 固定宽度 */
}

/* 垂直菜单的样式 */
.el-menu-vertical-demo {
  width: 200px; /* 菜单宽度 */
  padding-top: 40px; /* 上内边距 */
  border: 0; /* 去掉边框 */
}

/* 全局菜单样式调整 */
.el-menu {
  border-right: none !important; /* 去掉右边框，覆盖默认样式 */
}
</style>
